<template>
  <div class="recommend">
    <div class="re-top">
      <ul>
        <li v-for="item of reTopList" :key="item.id">
          <img :src="item.imgUrl" alt="">
        </li>
      </ul>
    </div>
    <div class="re-bottom">
      <div class="re-bottom-left border-right">
        <img src="http://img2.yidejia.com/8/2019/03/08/68a94ace8f68e.jpg" alt="">
      </div>
      <div class="re-bottom-right">
        <div class="top border-bottom">
          <img src="http://img2.yidejia.com/5/2019/03/08/10e6d82745ea.jpg" alt="">
        </div>
        <div class="bottom">
          <img src="http://img2.yidejia.com/8/2019/03/08/10e9917fca42.jpg" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  data () {
    return {
      reTopList: [
        {
          id: '001',
          imgUrl: 'http://img2.yidejia.com/8/2019/03/08/9d338086ca27.jpg'
        },
        {
          id: '002',
          imgUrl: 'http://img2.yidejia.com/8/2019/03/08/106d365cdb80.jpg'
        },
        {
          id: '003',
          imgUrl: 'http://img2.yidejia.com/2/2019/03/08/6834263c21e17.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="stylus" scoped>
  .re-top
    overflow hidden
    margin-top .2rem
    width 100%
    height 0
    padding-bottom 44.35%
    ul
      display flex
      li
        flex 1
        img
          width 100%
          height 100%
  .re-bottom
    overflow hidden
    margin-top .2rem
    width 100%
    height 0
    padding-bottom 62.5%
    .re-bottom-left
      width 50%
      height 4.69rem
      float left
    .re-bottom-right
      width 50%
      height 4.69rem
      float right
      .top,.bottom
        height 50%
    img
      width 100%
      height 100%
</style>
